import viewWidthFn from "../utils/screen"
var $ =window.$ = require("jquery")

// let pageCenter = {x:window.innerWidth/4,y:window.innerHeight/4}
let pageCenter = {x:662.83*1.2/2,y:246.17*1.4/2}
var yr=pageCenter.y;var xr = pageCenter.x
// console.log(pageCenter)
var orginWidth = 200;
var changeGradient =3.8;
var h = 30
const init= (val)=>{
    $("#loop").css({width: `${pageCenter.x*2/100}rem`,
        height: `${pageCenter.y*2/100}rem`,
        "margin-left": `${-pageCenter.x/100}rem`,
        "margin-top": `${-(pageCenter.y+20)/100}rem`})
    var xx = 0;

    var circle = [{},{},{},{},{},{}]
    circle.map((item,i)=>{
        let times = i*10;
        let opacity=(1-i/10)
         item["times"]=times;
         item["xx"]=0;
         item["h"]=h;
         item["opacity"]=opacity;

        
    })
    let ddd = 2
    circle.map((item,i)=>{
        if(item.times==60){
            item.times = 0
        }
        xy(item,`#e${i}`)

    })
    
    window.setdd = setInterval(function(){
        // console.log(ddd,xx)
        if(ddd%2){
            circle.map((item,i)=>{
                item.times ++;
                if(item.times==60){
                    item.times = 0
                }
                xy(item,`#e${i}`)

            })
            xx++

        }else{
            xx+=0.1

        }

        if(parseInt(xx)==10){
            ddd++
            xx=0
            // clearInterval(window.setdd)

        }
        // console.log(xx,"e.times")

    },160)


}
var clearIntervalFn = ()=>{
    clearInterval(window.setdd)
}
var slicePxFn = (str) =>{
    if(typeof str == 'string'){
        return str.slice(0,str.length-2)
    }else{
        return str
    }
}
var xy=(e,id)=>{
    e.h =h+e.times
    var hudu = (2*Math.PI / 360) * 6 *  e.h;
    var x = xr + Math.sin(hudu) * xr;
    var y = yr - Math.cos(hudu) * yr
    if( e.h>60 ){
        e.xx  =(orginWidth-changeGradient*h)+changeGradient*e.times-changeGradient*h;
        e.opacity = e.times/50-0.2
    }else {
        e.xx = (orginWidth)- changeGradient*e.times;
        e.opacity = 1-e.times/50

    }
    // console.log(e.xx)
    if(!e.times){
        $(id).addClass("active")
    }else{
        $(id).removeClass("active")
    }
    let scale = slicePxFn(viewWidthFn())/100;
    scale = scale==1? scale:1;
    let zoom = `scale(${e.xx/orginWidth*scale})`;
    $(id).css({top:`${y/100}rem`,left:`${x/100}rem`,width:`${e.xx/100}rem`,height:`${e.xx/100}rem`,opacity:e.opacity,"margin-left":`${-e.xx/200}rem`,"margin-top":`${-e.xx/200}rem`}).find(".CircleContent").css({transform:zoom})

}
export {init,clearIntervalFn} 